<template>
	<view>
		<view class="swiper">
			<view class="swiper-box">
				<view class="swiper-item" v-if="info.taskInfo">
					<image v-if="info.taskInfo.type == 1" :src="info.taskInfo.image" mode="aspectFill" />
					<video show-fullscreen-btn controls class="video-item" v-if="info.taskInfo.type == 2 || info.taskInfo.type == 3" :src="info.taskInfo.link" mode="aspectFill" />
				</view>
			</view>
		</view>
		<view class="info">
			<view class="info-top">
				<view class="left">
					<view class="title" v-if="info.taskInfo">{{info.taskInfo.title}}</view>
					<view class="label" v-if="info.taskInfo"><text>{{info.taskInfo.type==1?'图文':(info.taskInfo.type==2?'音频':'视频')}}专题</text>
					</view>
				</view>
			</view>
			<view class="info-bottom">
				<view class="collect">已有52人学习</view>
			</view>
		</view>
		<view class="cont-wrap">
			<view class="cont-tabs">
				<view :class="tabIndex == 1 ? 'active' : ''" @click="tabIndex = 1">
					内容介绍
				</view>
				<view :class="tabIndex == 2 ? 'active' : ''" @click="tabIndex = 2">
					章节列表
				</view>
			</view>
			<view class="cont-pannel">
				<view v-show="tabIndex == 1" class="rich-pannel" v-if="info.taskInfo">
					<rich-text :nodes="info.taskInfo.content"></rich-text>
				</view>
				<view v-show="tabIndex == 2">
					<navigator class="list" v-for="(item,index) in list" :key="index"
						:url="`/pages/courseDetail/courseDetail?id=${item.id}&special_id=${specialId}`">
						<image src="@/static/media3.png"></image>
						<text class="num">{{item.sort}}</text>
						|
						<text class="title">{{item.title}}</text>
						<text class="free">{{item.is_free==1?'免费':'付费'}}</text>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		taskInfo,
		getCourseList
	} from '@/api/product';
	import rfSwipeDot from '@/components/rf-swipe-dot';
	export default {
		components: {
			rfSwipeDot
		},
		data() {
			return {
				current: 0,
				swiperList: [{
					cover: require('@/static/logo.png'),
				}, ],
				tabIndex: 1,
				id: 0,
				specialId: 0,
				taskId: 0, //章节id
				info: {},
				list: []
			};
		},
		onLoad(options) {
			this.id = options.id
			this.specialId = options.special_id
			this.getDetail()
			this.getCourseList()
		},
		methods: {
			async getDetail() {
				const res = await this.$http.post(
					`${taskInfo}`, {
						id: this.id,
						specialId: this.specialId
					}, {
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						},
					}
				);
				this.info = res.data;
			},
			async getCourseList() {
				const res = await this.$http.post(`${getCourseList}`, {
					special_id: Number(this.specialId),
					source_id: 0
				}, {
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				this.list = res.data.list
				// this.taskId = res.data.list[0].id
			},
			handleDotChange(e) {
				this.current = e.detail.current;
			},
		},
	};
</script>
<style lang="scss" scoped>
	.video-item{
		width: 100%;
		height: 40vw;
	}
	.top-nav {
		display: flex;
		align-items: center;
		background: $color-white;
		padding: 0 $spacing-base;
		height: 140rpx;
		background-color: $color-white;

		.left {
			margin-right: $spacing-base;
			display: flex;
			align-items: center;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.logo-text {
			flex: 1;
			color: $base-color;

			view {
				font-weight: bold;
			}
		}

		.right {
			background: $base-color;
			color: $color-white;
			border-radius: $border-radius-lg;
			width: 120rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}

	.rich-pannel {
		padding: 10px;
	}

	/*轮播图*/
	.swiper {
		width: 100%;
		padding-bottom: 20upx;
		display: flex;
		justify-content: center;
		background: $color-white;

		.swiper-box {
			width: 100%;
			height: 40vw;
			overflow: hidden;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 40vw;

				swiper-item {
					image {
						width: 100%;
						height: 40vw;
					}
				}
			}
		}
	}

	.info {
		background: $color-white;
		padding: $spacing-base;

		.info-top {
			display: flex;
			justify-content: space-between;
			margin: $spacing-sm $spacing-base;

			.title {
				font-size: $font-lg;
			}

			.label {
				text {
					background: rgba(44, 142, 255, 0.06);
					color: $font-color-spec;
					padding: 0 $spacing-base;
					border-radius: $border-radius-base;
				}
			}
		}

		.info-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 $spacing-base;

			view.pin-money {
				display: flex;
				align-items: center;

				view {
					font-size: 30upx;
					margin-right: $spacing-sm;

					text {
						font-size: 40upx;
					}
				}

				.price {
					color: #ff4a4a;
				}

				image {
					width: 40upx;
					height: 20upx;
				}
			}

			.total {
				color: #999;
				margin-left: $spacing-sm;
			}

			.collect {
				color: #999;
			}
		}
	}

	.cont-wrap {
		background: $color-white;
		padding: $spacing-base;
		margin-top: $spacing-base;

		.cont-tabs {
			display: flex;

			view {
				flex: 1;
				text-align: center;
				line-height: 60upx;
				font-size: $font-lg;

				&.active {
					position: relative;
					color: $base-color;

					&::after {
						position: absolute;
						content: '';
						border-bottom: 1upx solid $base-color;
						bottom: 0;
						width: 30%;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}

		.cont-pannel {
			.list {
				display: flex;
				align-items: center;
				padding: $spacing-base;

				image {
					width: 28upx;
					height: 28upx;
				}

				text {
					margin: 0 $spacing-sm;
				}

				.title {
					flex: 1;
				}

				.free {
					padding: 0 $spacing-base;
					color: #feb720;
					background-color: rgba(254, 183, 32, 0.1);
					border-radius: $border-radius-lg;
				}
			}
		}
	}
</style>
